<template>
  <div id="reconfiguration" >
    <!--右上角按钮-->
   <!-- <div style='position:absolute;right:2%;top:10%;z-index: 99'>
      <div class='top_button_box'>
        <i style="margin-left:5px;color: white;font-size: 30px;opacity: 0.5;z-index: 98" @click="fullScreen" class="el-icon-full-screen"></i>
      </div>
    </div>-->


    <div id="entirety" style="background-image: url('/static/background/background.png');height:120vh">
    <div style='display: flex;display: -webkit-flex;justify-content: center'>
      <div class="title_class" style='margin-top: 1vh;font-size: 13pt'>资源变动日志</div>
    </div>
      <div class='table_box'>
        <el-table
          :data="resourceChangeList"
          height="30vh"
          :row-style="{height: '5vh'}"
          :cell-style="{padding: '0'}"
          :header-row-style="{height: '5vh'}"
          :header-cell-style="{padding: '0'}"
          border
          style="width:100%">
          <el-table-column prop="id" label="任务id" sortable :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click='getGraphDatasShow(scope.row.id)'>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="jobName" label="任务名称" sortable :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click='getGraphDatasShow(scope.row.jobName)'>{{scope.row.jobName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="virtualMachineId" label="虚拟机编号" sortable  :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click='getHostDetail(scope.row.virtualMachineId)'>{{scope.row.virtualMachineId}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="virtualMachineName" label="虚拟机名称" sortable  :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span style="cursor: pointer;" @click='getHostDetail(scope.row.virtualMachineName)'>{{scope.row.virtualMachineName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="platformResourceName" label="云商所属" sortable  :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="workDir" label="工作目录"  :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column label="状态情况" sortable>
            <template slot-scope="scope">
              <span>{{getStateText(scope.row.status)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style='display: flex;display: -webkit-flex;justify-content: center'>
        <div class="title_class" style='margin-top: 0.5vh;font-size: 13pt'>{{ title }}</div>
      </div>
      <el-button v-show='showTaskGraph' type="text" size="medium" @click="quitTaskGraph" style='float: right;margin-top: -30px;margin-right: 50px'>返回</el-button>

      <div  v-show="showGoChartFlag" class='cardDiv' id="diagramParentDiv">
        <div id="myDiagramDiv" style=" width:100%;height:70vh" />
      </div>

      <div v-show='!showGoChartFlag' >
        <div class='table_box'>
          <el-button
            type="text"
            size="small"
            @click="quitDetail"
          >退出详情</el-button>
        <el-table
          :data="detailDataInGraphShow.nodeList"
          height="30vh"
          :row-style="{height: '5vh'}"
          :cell-style="{padding: '0'}"
          :header-row-style="{height: '5vh'}"
          :header-cell-style="{padding: '0'}"
          border
          style="width:100%;height:50vh">
          <el-table-column prop="hostId" label="虚拟机编号"  sortable :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="taskId" label="任务id"  sortable :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="manufacturer" label="云商所属"  :show-overflow-tooltip="true" >{{detailDataInGraphShow.label}}</el-table-column>
          <el-table-column label="配置信息"  :show-overflow-tooltip="true" >
            <el-table-column
              prop="configInfo.cpu"
              label="CPU"
              width="120">
            </el-table-column>
            <el-table-column
              prop="configInfo.gpuMemory"
              label="GPU内存"
              width="120">
            </el-table-column>
            <el-table-column
              prop="configInfo.stype"
              label="样式"
              width="120">
            </el-table-column>
            <el-table-column
              prop="configInfo.storage"
              label="存储"
              width="120">
            </el-table-column>
            <el-table-column
              prop="configInfo.bandwidth"
              label="带宽"
              width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column label="状态情况" sortable>
            <template slot-scope="scope">
              <span>{{getStateText(scope.row.state)}}</span>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>

      <el-dialog
        title="详情"
        :visible.sync="logDialogVisible"
        width="50%"
      >
        <span>虚拟机编号：{{virtualMachineIdInDialog}}</span>
        <el-descriptions title="" style='margin-top: 10px'>
          <el-descriptions-item label="CPU利用率">{{ hostDetailInfo.cpu.useRatio }}</el-descriptions-item>
          <el-descriptions-item label="CPU速度">{{ hostDetailInfo.cpu.speed }}</el-descriptions-item>
          <el-descriptions-item label="进程数">{{ hostDetailInfo.cpu.process }}</el-descriptions-item>
          <el-descriptions-item label="线程数">{{ hostDetailInfo.cpu.thread }}</el-descriptions-item>
          <el-descriptions-item label="使用中内存">{{ hostDetailInfo.memory.using }}</el-descriptions-item>
          <el-descriptions-item label="可用内存">{{ hostDetailInfo.memory.usable }}</el-descriptions-item>
          <el-descriptions-item label="磁盘容量">{{ hostDetailInfo.disk.capacity }}</el-descriptions-item>
          <el-descriptions-item label="磁盘活动时间">{{ hostDetailInfo.disk.activeTime }}</el-descriptions-item>
          <el-descriptions-item label="磁盘平均响应时间">{{ hostDetailInfo.disk.argResponseTime }}</el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <span>上游虚拟机</span>
        <div class='table_box' style='margin: 10px 0 10px 0px; '>
          <el-table
            :data="upHostLists"
            border
            height="200"
            :row-style="{height: '5vh'}"
            :cell-style="{padding: '0'}"
            :header-row-style="{height: '5vh'}"
            :header-cell-style="{padding: '0'}"
            style="width:100%;height:25vh">
            <el-table-column prop="virtualMachineId" label="虚拟机编号"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="id" label="任务id"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="manufacturer" label="云商所属"  :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="configInfo" label="配置信息"  :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column label="状态情况" sortable>
              <template slot-scope="scope">
                <span>{{getStateText(scope.row.state)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span>下游虚拟机</span>
        <div class='table_box' style='margin: 10px 0 10px 0px; '>
          <el-table
            :data="downHostLists"
            border
            height="200"
            :row-style="{height: '5vh'}"
            :cell-style="{padding: '0'}"
            :header-row-style="{height: '5vh'}"
            :header-cell-style="{padding: '0'}"
            style="width:100%;height:25vh">
            <el-table-column prop="virtualMachineId" label="虚拟机编号"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="id" label="任务id"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="manufacturer" label="云商所属"  :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="configInfo" label="配置信息"  :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column label="状态情况" sortable>
              <template slot-scope="scope">
                <span>{{getStateText(scope.row.state)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-divider></el-divider>
        <span>日志信息</span>
        <div class='table_box' style='margin: 10px 0 10px 0px; '>
          <el-table
            :data="logDetailInfo"
            border
            height="200"
            :row-style="{height: '5vh'}"
            :cell-style="{padding: '0'}"
            :header-row-style="{height: '5vh'}"
            :header-cell-style="{padding: '0'}"
            style="width:100%;height:25vh">
            <el-table-column prop="time" label="时间"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column prop="id" label="任务id"  sortable :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column label="操作" sortable>
              <template slot-scope="scope">
                <span>{{getStateText(scope.row.state)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer"></span>
      </el-dialog>
    </div>

  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang="scss">
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/reconfiguration.scss';
</style>
